<template>
  <div class="electric-panel" :class="bgClass">
    <div class="panel" :style="{ transform: `rotate(${rotate}deg)` }">
      <div class="remainder" :style="{ width: quantity + '%' }" />
    </div>
    <div
      v-show="showText"
      :style="{ marginLeft: (parseFloat(rotate) ? 0 : '10') + 'px' }"
      class="text"
    >
      {{ quantity }}%
    </div>
  </div>
</template>

<script>
/**
 * 电池电量Icon
 */
export default {
  name: "ElectricQuantity",
  props: {
    quantity: {
      type: Number,
      default: 70,
    },
    showText: {
      type: Boolean,
      default: true,
    },
    rotate: {
      type: String,
      default: "0",
    },
  },
  computed: {
    bgClass() {
      if (this.quantity >= 30) {
        return "success";
      } else if (this.quantity >= 15) {
        return "warning";
      } else if (this.quantity >= 1) {
        return "danger";
      } else {
        return "danger";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/* custom theme color */
$color-primary: #447ced;
$color-success: #13ce66;
$color-warning: #ffba00;
$color-danger: #ff4949;
$color-info: #909399;
$color-white: #fff;

@mixin panel($color) {
  .panel {
    border-color: #{$color};
    &:before {
      background: #{$color};
    }
    .remainder {
      background: #{$color};
    }
  }
  .text {
    color: #{$color};
  }
}
.electric-panel {
    width: 80px;
  display: flex;
  //   justify-content: center;
  align-items: center;

  .dc {
    font-size: 12px;
    margin-right: 10px;
    @include panel($color-success);
  }
  .panel {
    box-sizing: border-box;
    width: 30px;
    height: 18px;
    position: relative;
    border: 2px solid #ccc;
    padding: 1px;
    border-radius: 3px;

    &::before {
      content: "";
      border-radius: 0 1px 1px 0;
      height: 10px;
      background: #ccc;
      width: 4px;
      position: absolute;
      top: 50%;
      right: -7px;
      transform: translateY(-50%);
    }

    .remainder {
      border-radius: 1px;
      position: relative;
      height: 100%;
      width: 0%;
      left: 0;
      top: 0;
      background: #fff;
    }
  }

  .text {
    text-align: left;
    width: 42px;
  }

  &.success {
    @include panel($color-success);
  }

  &.warning {
    @include panel($color-warning);
  }

  &.danger {
    @include panel($color-danger);
  }
}
</style>
